<template>
  <div class="mar_4">
    <commhead-2 name="匹配结果"/>
    <div class="order_box">
      <div :class="{orange:orderby.zhuangtai===0}" @click="change(0)">销量</div>
      <div class="byprice" :class="{orange:orderby.zhuangtai===1}"  @click="change(1)">
        价格
        <span class=" smart up" :class="{special_orange_up:orderby.zhuangtai===1&&orderby.upOrDw==0}"></span>
        <span class=" smart down" :class="{special_orange_down:orderby.zhuangtai===1&&orderby.upOrDw==1}"></span>
      </div>
      <div :class="{orange:orderby.zhuangtai===2}"  @click="change(2)">新品</div>
    </div>
    <div>
      <item :items="list" @godetail="fn"/>
    </div>
  </div>
</template>

<script>
import Commhead2 from '../../components/Commhead2.vue'
import Item from '../Home/components/Item.vue'
import { fetchItems } from '_api'
export default {
  data () {
    return {
      orderby: {
        zhuangtai: 0,
        upOrDw: 1
      },
      list: []
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    // 去详情页
    fn (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    // 获取类别列表
    fetchItems (relay) {
      fetchItems({
        k: this.$route.query.keyword,
        orderBy: this.relay
      }).then(res => {
        if (res.data.code === 0) {
          this.list = res.data.data.result
        } else {
          this.list = []
        }
      })
    },
    // 选中排序规则
    change (n) {
      this.orderby.zhuangtai = n
      if (n === 1) {
        this.orderby.upOrDw++
        this.orderby.upOrDw %= 2
      }
      this.fetchItems(this.relay)
    }
  },
  computed: {
    relay () {
      let flag = null
      switch (this.orderby.zhuangtai) {
        case 0 : flag = 'ordersDown'
          break
        case 1 :switch (this.orderby.upOrDw) {
          case 0 : flag = 'priceUp'
            break
          case 1 :flag = 'priceDown'
            break
        }
          break
        default : flag = 'addedDown'
          break
      }
      return flag
    }
  },
  components: { Commhead2, Item }
}
</script>

<style lang="scss" scoped>
.mar_4{
  padding-top: .4rem;
  .order_box{
    display: flex;
    height: .3rem;
    font-size: 12px;
    justify-content:space-around;
    justify-items: center;
    background-color: rgba(235, 232, 232, 0.6);
    div{
      line-height: .3rem;
      flex:1;
    }
    .byprice{
      position: relative;
      .smart{
        position: absolute;
      }
      .up{
        right: .29rem;

        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-bottom:6px solid rgb(182, 175, 175);
      }
      .down{
        right: .29rem;
        top:16px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-top:6px solid rgb(182, 175, 175);
      }
      .special_orange_up{
        border-bottom:6px solid orangered
      }
      .special_orange_down{
        border-top:6px solid orangered
      }
    }
  }
}
.orange{
  color: orangered;
}

</style>
